body{
	margin: 0;
	padding: 0;
}
.menu{
	margin: 0;
	padding: 0;
	height: 100px;
	width: 100%;
	background-color: #1f2040;
	
}
.container{
	z-index: 1;/* 堆叠顺序,置顶 */
	position: fixed;/* 生成固定定位的元素,不会随着页面的滚动而滚动 */
	top: 0px;
	left: 0px;
	perspective: 1000;/* 从1000查看一个元素的角度 */
	width: 100%;/* 缩小后不会错位 */
	height: 100px;/* 元素高度100px,宽度100% */
	background-color: #1f2040;
	display: flex;
}
.container>div{
	flex: 1;
	text-align: center;
}
.btn{
	font-family: 方正姚体;
	margin-top: 20px;
	width: 120px;
	height: 60px;/* 按钮大小 */
	border: none;/* 设置边框样式 ,无样式*/
	background-color: #1f2040;
	color: #93b5cf;
	font-size: 23px;
	border-radius: 15px;/* 给div元素添加圆角的边框 */
	cursor: pointer;/* 改变鼠标放上去的光标 */
	transition:linear 0.5s ;/* 将鼠标悬停在一个 div 元素上，以相同速度(linear)逐步改变表格的宽度 */
	letter-spacing: 3px;
}

.btn1:hover{
	transform:rotateX(15deg);/* 定义沿着X轴旋转元素 */
	box-shadow: 0 15px 15px #f7c173;/* 向 div 元素添加阴影 左右为0 上下为15px 阴影效果为15px 阴影颜色#f7c173 */
}

.btn2:hover{
	transform:rotateX(-15deg);/* 定义沿着X轴旋转元素 */
	box-shadow: 0 -15px 15px #f7c173;/* 向 div 元素添加阴影 左右为0 上下为-15px 阴影效果为15px 阴影颜色#f7c173 */
}

.btn3:hover{
	transform:rotateY(15deg);/* 定义沿着Y轴旋转元素 */
	box-shadow: -15PX 0px 15px #f7c173;/* 向 div 元素添加阴影 左右为-15px 上下为0 阴影效果为15px 阴影颜色#f7c173 */
}
